<template>
  <div class="share" v-click-move @click="emit('changeShareDialog', true)">
    <div>
      {{ lang.footer_invite_friends }}
      <NuxtImg
        src="/images/activity/clipdoll/share.png"
        alt=""
        width="38"
        height="38"
      />
    </div>
  </div>

  <div class="clipDoll-warp3">
    <div class="warp3">
      <p class="title">{{ lang.footer_winning_record }}</p>
      <div class="list-box">
        <div class="list" :style="listStyle" ref="listRef">
          <div v-for="record in scrollData" :key="record.id" class="li">
            <p>{{ record.phone }}</p>
            <p>{{ lang.footer_just_withdrew }}</p>
            <p>{{ userStore.moneyUnit }}:{{ record.amount }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="clipDoll-warp4">
    <div class="warp4">
      <p class="title">{{ lang.footer_activity_description }}</p>
      <div>
        <p v-for="rule in activityRules" :key="rule.id">
          {{ rule.text }}
        </p>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
const lang: any = getCurrentPageLang("activity/clipdoll");
const emit = defineEmits(["changeShareDialog"]);
const userStore = useUserStore();

// 中奖记录数据
const winningRecords = ref([
  { id: 1, phone: "553****34**1", amount: "188" },
  { id: 2, phone: "550****85**2", amount: "188" },
  { id: 3, phone: "558****13**3", amount: "88" },
  { id: 4, phone: "555****00**4", amount: "888" },
  { id: 5, phone: "559****67**5", amount: "188" },
  { id: 6, phone: "550****23**6", amount: "388" },
  { id: 7, phone: "559****34**7", amount: "88" },
  { id: 8, phone: "552****83**8", amount: "88" },
  { id: 9, phone: "555****09**9", amount: "88" },
  { id: 10, phone: "552****78**10", amount: "88" },
  { id: 11, phone: "556****80**", amount: "188" },
  { id: 12, phone: "553****26**", amount: "188" },
  { id: 13, phone: "557****40**", amount: "88" },
  { id: 14, phone: "555****59**", amount: "388" },
  { id: 15, phone: "557****96**", amount: "188" },
  { id: 16, phone: "553****20**", amount: "88" },
  { id: 17, phone: "551****15**", amount: "188" },
  { id: 18, phone: "556****49**", amount: "88" },
  { id: 19, phone: "556****37**", amount: "888" },
  { id: 20, phone: "558****86**", amount: "188" },
  { id: 21, phone: "556****80**", amount: "88" },
  { id: 22, phone: "554****79**", amount: "88" },
  { id: 23, phone: "551****54**", amount: "1888" },
  { id: 24, phone: "553****24**", amount: "88" },
  { id: 25, phone: "557****01**", amount: "188" },
  { id: 26, phone: "554****13**", amount: "88" },
  { id: 27, phone: "550****68**", amount: "188" },
  { id: 28, phone: "555****37**", amount: "588" },
  { id: 29, phone: "554****03**", amount: "88" },
  { id: 30, phone: "557****67**", amount: "88" },
  { id: 31, phone: "554****09**", amount: "88" },
  { id: 32, phone: "554****84**", amount: "88" },
  { id: 33, phone: "557****70**", amount: "888" },
  { id: 34, phone: "554****18**", amount: "88" },
  { id: 35, phone: "555****10**", amount: "388" },
  { id: 36, phone: "558****46**", amount: "188" },
  { id: 37, phone: "554****67**", amount: "188" },
  { id: 38, phone: "551****67**", amount: "88" },
  { id: 39, phone: "556****74**", amount: "388" },
  { id: 40, phone: "557****05**", amount: "188" },
  { id: 41, phone: "551****05**", amount: "88" },
  { id: 42, phone: "558****90**", amount: "88" },
  { id: 43, phone: "557****10**", amount: "88" },
  { id: 44, phone: "554****34**", amount: "88" },
  { id: 45, phone: "551****39**", amount: "88" },
  { id: 46, phone: "550****02**", amount: "88" },
  { id: 47, phone: "556****64**", amount: "88" },
  { id: 48, phone: "558****20**", amount: "188" },
  { id: 49, phone: "558****33**", amount: "88" },
  { id: 50, phone: "550****36**", amount: "588" },
]);

// 滚动数据
const scrollData: any = ref([]);

// 活动规则数据
const activityRules = ref([
  { id: 1, text: lang.footer_login_daily },
  { id: 2, text: lang.footer_first_bet },
  { id: 3, text: lang.footer_first_deposit },
  { id: 4, text: lang.footer_daily_deposit },
  { id: 5, text: lang.footer_invite_more },
  { id: 6, text: lang.footer_bonus_credited },
  { id: 7, text: lang.footer_bonus_requirement },
]);

// 自动滑动相关
const listRef = ref<HTMLElement>();
const currentIndex = ref(0);
const isAutoScrolling = ref(false);
const scrollInterval = ref<NodeJS.Timeout | null>(null);

// 计算列表样式
const noTransition = ref(false);
const listStyle = computed(() => {
  // 如果数据少于等于7行，不需要滑动
  if (winningRecords.value.length <= 7) {
    return {
      transition: "none",
      transform: "none",
    };
  }

  // 计算滑动位置（向下滑动，每行高度1rem）
  const translateY = currentIndex.value * 1.0; // 每行高度1rem

  if (noTransition.value) {
    return {
      transition: "none",
      transform: `translateY(${-translateY}rem)`,
    };
  }

  return {
    transition: "transform 0.5s ease-in-out",
    transform: `translateY(${-translateY}rem)`,
  };
});

function iniPosition() {
  noTransition.value = true;
  setTimeout(() => {
    currentIndex.value = scrollData.value.length - 7;
    setTimeout(() => {
      noTransition.value = false;
    }, 100);
  }, 100);
}

// 开始自动滑动
const startAutoScroll = async () => {
  if (winningRecords.value.length <= 7) return;
  stopAutoScroll();
  if (!window?.setInterval) return;
  isAutoScrolling.value = true;
  scrollInterval.value = setInterval(async () => {
    currentIndex.value--;
    // 当滑动到复制的数据时，瞬间重置到初始状态
    if (currentIndex.value === 0) {
      setTimeout(() => {
        // 瞬间重置到初始状态（无动画）
        iniPosition();
      }, 500);
    }
  }, 1500);
};

// 停止自动滑动
const stopAutoScroll = () => {
  if (scrollInterval.value) {
    clearInterval(scrollInterval.value);
    scrollInterval.value = null;
  }
  isAutoScrolling.value = false;
};

// 页面可见性变化处理
const handleVisibilityChange = () => {
  if (document.hidden) {
    // 页面隐藏时停止滑动
    stopAutoScroll();
  } else {
    // 页面显示时恢复滑动
    startAutoScroll();
  }
};

function addData() {
  scrollData.value = JSON.parse(JSON.stringify(winningRecords.value));
  if (scrollData.value.length > 7) {
    const itemsToAdd = scrollData.value.slice(0, 7);
    itemsToAdd.forEach((item: any, index: number) => {
      scrollData.value.push({
        ...item,
        id: scrollData.value.length + index + 1,
      });
    });
  }
  scrollData.value = scrollData.value.reverse();
}

// 组件挂载时开始滑动
onMounted(() => {
  startAutoScroll();
  // 监听页面可见性变化
  document.addEventListener("visibilitychange", handleVisibilityChange);
});
onActivated(() => {
  startAutoScroll();
  document.addEventListener("visibilitychange", handleVisibilityChange);
});

// 组件卸载时清理定时器和事件监听
onUnmounted(() => {
  stopAutoScroll();
  document.removeEventListener("visibilitychange", handleVisibilityChange);
});
onDeactivated(() => {
  stopAutoScroll();
  document.removeEventListener("visibilitychange", handleVisibilityChange);
});

// 监听数据变化
watch(
  winningRecords,
  () => {
    addData();
    iniPosition();
    startAutoScroll();
  },
  { immediate: true }
);
</script>

<style scoped lang="scss">
.share {
  margin-top: 0.4rem;
  padding: 0 0.3rem;
  color: #fff;

  div {
    padding: 0.18rem 0.24rem 0.18rem 0.4rem;
    background: #ffffff1a;
    border-radius: 0.3rem;
    border: 0.01px solid rgba(255, 255, 255, 0.5);
    font-weight: 400;
    font-size: 0.45rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 1.4rem;

    img {
      width: 0.94rem;
    }
  }
}

.clipDoll-warp3 {
  margin-top: 0.5rem;
  padding: 0 0.3rem;
  box-sizing: border-box;
  color: #fff;

  .warp3 {
    width: 100%;
    height: 100%;
    background: #ffffff0d;
    border-radius: 0.3rem;
    overflow: hidden;

    .title {
      height: 1.3rem;
      background: #ffffff1a;
      font-weight: 400;
      font-size: 0.45rem;
      text-align: center;
      line-height: 1.3rem;
      border-radius: 0.3rem 0.3rem 0 0;
    }

    .list-box {
      width: 100%;
      height: 100%;
      overflow: hidden;

      .list {
        height: 7.3rem;
        display: flex;
        flex-direction: column;
        padding: 0.2rem 0.3rem;
        box-sizing: border-box;

        div {
          display: flex;
          justify-content: space-between;
          height: 1rem;
          line-height: 1rem;

          p:nth-of-type(3) {
            color: var(--theme-dec4);
            font-weight: 600;
          }
        }
      }
    }
  }
}

.clipDoll-warp4 {
  padding: 0 0.3rem 0.2rem;
  margin-top: 0.7rem;
  color: #fff;

  div {
    margin-top: 0.2rem;
    opacity: 0.8;

    p {
      margin: 0.15rem auto;
      text-indent: -0.8em;
      margin-left: 0.8em;
    }
  }

  .title {
    text-align: center;
    font-weight: 400;
    font-size: 0.45rem;
  }
}
</style>
